import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import routerManager from './utils/router.js'

// 全局注册小程序标签组件
const ViewComponent = {
  name: 'view',
  template: '<div><slot /></div>'
}

const ImageComponent = {
  name: 'image',
  props: ['src', 'mode'],
  template: '<img :src="src" :style="{ objectFit: mode === \'aspectFit\' ? \'contain\' : \'cover\' }" />'
}

const TextComponent = {
  name: 'text',
  template: '<span><slot /></span>'
}

// 导入页面组件
import HomePage from './pages/index/index.vue'
import AiChat from './pages/ai-chat/index.vue'
import SmartEvaluation from './pages/smart-evaluation/index.vue'
import SmartEvaluationTest from './pages/smart-evaluation/test.vue'
import SmartEvaluationSimple from './pages/smart-evaluation/simple.vue'
import SolutionRecommend from './pages/solution-recommend/index.vue'
import ProcessDetail from './pages/process-detail/index.vue'
import ProgressTracking from './pages/progress-tracking/index.vue'
import Tools from './pages/tools/index.vue'
import PersonalCenter from './pages/personal-center/index.vue'
import AddressManagement from './pages/address-management/index.vue'
import UsageRecords from './pages/usage-records/index.vue'

// 路由配置
const routes = [
  { path: '/', component: HomePage },
  { path: '/index', component: HomePage },
  { path: '/pages/index', component: HomePage },
  { path: '/ai-chat', component: AiChat },
  { path: '/pages/ai-chat', component: AiChat },
  { path: '/smart-evaluation', component: SmartEvaluation },
  { path: '/pages/smart-evaluation', component: SmartEvaluation },
  { path: '/smart-evaluation/test', component: SmartEvaluationTest },
  { path: '/pages/smart-evaluation/test', component: SmartEvaluationTest },
  { path: '/smart-evaluation/simple', component: SmartEvaluationSimple },
  { path: '/pages/smart-evaluation/simple', component: SmartEvaluationSimple },
  { path: '/solution-recommend', component: SolutionRecommend },
  { path: '/pages/solution-recommend', component: SolutionRecommend },
  { path: '/process-detail', component: ProcessDetail },
  { path: '/pages/process-detail', component: ProcessDetail },
  { path: '/progress-tracking', component: ProgressTracking },
  { path: '/pages/progress-tracking', component: ProgressTracking },
  { path: '/tools', component: Tools },
  { path: '/pages/tools', component: Tools },
  { path: '/pages/tools/index', component: Tools },
  { path: '/personal-center', component: PersonalCenter },
  { path: '/pages/personal-center', component: PersonalCenter },
  { path: '/pages/personal-center/index', component: PersonalCenter },
  { path: '/address-management', component: AddressManagement },
  { path: '/pages/address-management', component: AddressManagement },
  { path: '/pages/address-management/index', component: AddressManagement },
  { path: '/pages/index/index', component: HomePage },
  { path: '/pages/ai-chat/index', component: AiChat },
  { path: '/pages/smart-evaluation/index', component: SmartEvaluation },
  { path: '/pages/solution-recommend/index', component: SolutionRecommend },
  { path: '/pages/process-detail/index', component: ProcessDetail },
  { path: '/pages/progress-tracking/index', component: ProgressTracking },
  { path: '/usage-records', component: UsageRecords },
  { path: '/pages/usage-records', component: UsageRecords },
  { path: '/pages/usage-records/index', component: UsageRecords }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

// 添加路由守卫进行调试
router.beforeEach((to, from, next) => {
  console.log('🔀 路由跳转:', {
    from: from.path,
    to: to.path,
    component: to.matched[0]?.components?.default?.name || 'Unknown'
  })
  next()
})

router.afterEach((to, from) => {
  console.log('✅ 路由跳转完成:', to.path)
})

// 捕获路由错误
router.onError((error) => {
  console.error('❌ 路由错误:', error)
})

const app = createApp(App)

// 注册小程序标签组件
app.component('view', ViewComponent)
app.component('image', ImageComponent) 
app.component('text', TextComponent)

app.use(router)

// 初始化路由管理器
routerManager.init(router)

// 添加全局错误处理
app.config.errorHandler = (err, vm, info) => {
  console.error('❌ Vue 错误:', err, info)
}

console.log('🌟 应用启动中...')
app.mount('#app')
console.log('🎉 应用启动完成!')
